@extends("admin.layout.main")

@section("content")

    <style>
        .authority {
            width: 70%;
        }

        .authority tr {
            border-bottom: 1px solid #ddd;
            /*height: 40px;*/
        }

        .authority ul li {
            float: left;
            width: 150px;
            text-align: left;
            line-height: 40px;
            list-style: none;
        }

        .form-group label {
            text-align: left !important;
            width: 110px;
        }

        .form-horizontal > div {
            margin-left: 22px !important;
        }

        .col-sm-9 input {
            width: 180px;
        }

        .error {
            width: fit-content !important;
            margin-left: 5px;
            color: red;
        }
    </style>
    <div class="page-header">
        <h1>
            管理员
        </h1>
    </div>
    <form class="form-horizontal" id="form" method="post" action="{{ route('admin.platform.ajaxEditAdmin') }}">
        <div class="form-group">
            <label class="col-sm-1 control-label " style="width:150px;font-size:20px;font-weight: bold">管理员信息</label>
        </div>
        {{--<div class="form-group">--}}
            {{--<label class="col-sm-1 control-label sm-1"> 姓名：</label>--}}

            {{--<div class="col-sm-9">--}}
                {{--<input type="text" required name="id_name" placeholder="请输入管理员姓名" class="col-xs-10 col-sm-5">--}}
            {{--</div>--}}
        {{--</div>--}}
        {{--<div class="form-group">--}}
            {{--<label class="col-sm-1 control-label sm-1"> 手机号码：</label>--}}

            {{--<div class="col-sm-9">--}}
                {{--<input type="text" required isMobile="true" maxlength="11" minlength="11" name="mobile"--}}
                       {{--placeholder="请输入联系手机号" class="col-xs-10 col-sm-5">--}}
            {{--</div>--}}
        {{--</div>--}}
        <div class="form-group">
            <label class="col-sm-1 control-label sm-1"> 登录帐号：</label>

            <div class="col-sm-9">
                <input type="text" required name="name" placeholder="请设置管理员登录帐号" class="col-xs-10 col-sm-5">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label sm-1"> 登录密码：</label>

            <div class="col-sm-9">
                <input type="password" id="password" required name="password" placeholder="请设置管理员登录密码"
                       class="col-xs-10 col-sm-5">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label sm-1"> 确认密码：</label>

            <div class="col-sm-9">
                <input type="password" id="repassword" required checkInputWord="true" name="repassword" placeholder="请设置管理员登录密码"
                       class="col-xs-10 col-sm-5">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label sm-1"> 选择职务：</label>

            <div class="col-sm-9">
                <select name="admin_type_id" style="width:180px;" onchange="getAuthoriry(this)">
                    <option value="">请选择职务</option>
                    @foreach($roleList as $v)
                        <option value="{{ $v->id }}">{{ $v->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" style="font-size:20px;font-weight: bold">权限菜单</label>
        </div>
        <div class="form-group">
            <div style="margin-left: 3%;"> 请选择职务后查看职务的权限。</div>
            <div id="authority"></div>
        </div>
        <div class="clearfix form-actions">
            <div class="col-md-offset-2 col-md-9">
                <button class="btn btn-info" type="submit" id="submit">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                </button>
                <a class="btn" onclick="window.history.back()">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    取消
                </a>
            </div>
        </div>
    </form>
    <input type="hidden" id="actionList" value="{{ json_encode($moduleList) }}">
    <script src="{{ config('global.assets_path') }}js/jquery.validate.min.js"></script>
    <script src="{{ config('global.assets_path') }}js/messages_zh.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script src="/plugins/layui/layui_component.js"></script>
    <script src="/js/ajax.js"></script>
    <script>
        // 验证手机号码合法性
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");

        // 验证两次密码输入是否一致
        jQuery.validator.addMethod("checkInputWord",function (value,element) {
            var password = $('#password').val();
            return this.optional(element) || (password == value);
        },'两次密码不一致');

        function getAuthoriry(obj) {
            $('#authority').show();
            var role = $(obj).val();
            var data = $('#actionList').val();
            if (role != '') {
                $('#authority').html('');
                var str = '';
                $.ajax({
                    type: "POST",
                    url: "{{ route('admin.platform.ajaxGetModules') }}",
                    data: {"id": role},
                    dataType: "JSON",
                    async: false,
                    success: function (res) {
//                        console.log(res);
                        //从服务器获取数据进行绑定
                        if (res == 'all') {
                            $.each(data, function (i, item) {
                                //console.log(i,item);
                                str += '<div style="margin-top: 10px" class="module-list">';
                                str += '<label><span style="font-weight: bold;">'+i+'</span></label>';
                                str += '<table class="authority" style="text-align: left;">';
                                $.each(item, function (i2, item2) {
                                    str += '<tr><td style="width: 80px;"><i class="fa fa-home" style="margin-right: 2px"></i>'+i2+'</td>';
                                    str += '<td><ul>';
                                    $.each(item2,function (i3,item3) {
                                        str += '<li>' + item3.name + '</li>';
                                    })
                                    str += '</ul></td></tr>'
                                })
                                str += '</table></div>';
                            })
                        } else {
                            $.each(res, function (i, item) {
//                                console.log(i,item);
                                str += '<div style="margin-top: 10px" class="module-list">';
                                str += '<label><span style="font-weight: bold;">'+i+'</span></label>';
                                str += '<table class="authority" style="text-align: left;">';
                                $.each(item, function (i2, item2) {
                                    str += '<tr><td style="width: 80px;"><i class="fa fa-home" style="margin-right: 2px"></i>'+i2+'</td>';
                                    str += '<td><ul>';
                                    $.each(item2,function (i3,item3) {
                                        str += '<li>' + item3.name + '</li>';
                                    })
                                    str += '</ul></td></tr>'
                                })
                                str += '</table></div>';
                            })
                        }
                        $('#authority').append(str);
                    },
                    error: function (res) {
                        console.log(res);
                    }
                });
                $('#authority').show();
            } else {
                $('#authority').hide();
            }
        }
    </script>

@endsection